<!-- 放大卡片 -->
<template>
  <div class="card">
    <!-- 没有hover -->
    <div class="one">
      <div class="title">{{ props.title }}</div>
      <div class="text">{{ props.text }}</div>
    </div>
    <!-- 有hover -->
    <div class="two">
      <div class="title">{{ props.title }}</div>
      <div class="text">{{ props.text }}</div>
      <div class="points">
        <div class="point" v-for="item in props.points" :key="item">
          {{ item }}
        </div>
      </div>
      <img src="@/assets/images/parner3.png" alt="">
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "ddd",
  },
  text: {
    type: String,
    default: "ddd",
  },
  points: {
    type: Array,
    default: ["自研自主可控，安全可靠稳定;", "性能高体验优;"],
  },
  big: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="scss" scoped>
.top-card {
 // width: calc(100vw);
  background: url("@/assets/images/hzbigbg.png") no-repeat;
  background-size: 100%;
  padding-bottom: 131px;
}
.card {
  width: 280px;
  height: 450px;
  position: relative;
  border-radius: 10px;
  padding: 60px 40px;
  background: url("@/assets/images/parner1.png") no-repeat;
  background-size: 150px 150px;
  background-position: bottom 0px right 0px;
  //过渡
  transition: width 0.6s ease-in-out;
  .title {
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: 700;
  }
  .text {
    color: #666666;
    font-size: 18px;
  }
  //没有hover时显示 .one
  .one{
    width: 200px;
  }
  .two {
    display: none;
    width: 520px;
    height: 100%;
    background: url("@/assets/images/parnerbg.png") no-repeat;
    background-size: 525px 460px;
    background-position: bottom -4px right -2px;
    //padding-right: 150px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 40px;
    .text {
      color: #fff;
      margin-bottom: 20px;
    }
    .points {
      .point {
        padding: 10px 0;
      }
    }
    >img{
      position: absolute;
      right: 23px;
      bottom: 65px;
    }
  }
 
}
.card:nth-child(n-1) {
  margin-right: 20px;
}



//显色
.card:nth-child(odd) {
  background-color: #f0fcff;
}
.card:nth-child(even) {
  background-color: #fdffff;
}

//hover

.card:hover {
  background-color: $green;
  color: #fff;
  width: 520px;
  padding: 0;
  //hover时切换显示
  .one {
    display: none;
  }
  .two {
    display: block;
  }
}
//角角
.card:nth-child(-n + 2):hover >.two{
  border-radius: 10px 0 0 10px;
}
.card:nth-last-child(-n + 2):hover >.two {
  border-radius: 0px 10px 10px 0px;
}

//.two:nth-last-child(4) {
//  border-radius: 0px 10px 10px 0px;
//}
//.two:nth-child(1), .two:nth-child(2){
//  border-radius: 10px  0 0px 10px;
//}
</style>
